<template>
	<view class="tab-box" :style="{height: student.name?'212rpx':'104rpx'}">
		<view class="box">
			<view class="stu-name" v-if="student.name">{{student.name}} 学号：{{student.number}} <text>{{baseInfo.gradeMap[student.gradeId]}} {{baseInfo.claMap[student.clasId]}}</text></view>
			<view class="tabs">
				<text
					:class="{'active': activeIndex == i}"
					:style="{'margin-right': i == tabs.length-1?0:'16rpx'}"
					v-for="(tab, i) in tabs" :key="i" @click="$emit('change', i)"
				>{{tab}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabs: {
				type: Array,
				default: []
			},
			activeIndex: {
				type: Number,
				default: 0
			},
			student: {
				type: Object,
				default: {}
			}
		},
		data(){
			return {
				baseInfo: getApp().globalData.baseInfo,
			}
		}
	}
</script>

<style lang="less">
	.tab-box{
		.stu-name{
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
			margin-bottom: 24rpx;
            text{
                margin-left: 16rpx;
            }
        }
		
		.box{
			position: fixed;
			// top: 0;
			left: 0;
			right: 0;
			
			padding: 24rpx 24rpx;
			font-size: 32rpx;
			background: #fff;
			z-index: 1;
		}
		.tabs{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				display: inline-block;
				height: 80rpx;
				line-height: 80rpx;
				width: 50%;
				text-align: center;
				/* border: #8FE1EC; */
				border: 2rpx solid #999999;
				color: #333333;
				border-radius: 10rpx 10rpx 0 0;
				box-sizing: border-box;
				&.active{
					border-color: #8FE1EC;
					background-color: #8FE1EC;
					color: #fff;
				}
				
			}
		}
		
	}
</style>
